<template>
  <div ref="line" class="echarts-x"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { computed } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  title: {
    type: [Object, Array],
    default: () => null,
  },
  xdata:{
    type:Array,
    default:()=>[]
  },
  xAxis:{
    type:Object,
    default:()=>{}
  },
  axisTick:{
    type:Boolean,
    default:false
  },
  xLabelColor:{
    type:String,
    default:'#fff'
  },
  xTickLineColor:{
    type:String,
    default:'#fff'
  },
  yName:{
    type:String,
    default:''
  },
  yNameColor:{
    type:String,
    default:'#fff'
  },
  yAxis:{
    type:Object,
    default:()=>{}
  },
  yLineColor:{
    type:String,
    default:'#fff'
  },
  yLabelColor:{
    type:String,
    default:'#fff'
  },
  labels:{
    type:Array,
    default:[]
  },
  legend:{
    type:[Object,Boolean],
    default:false
  },
  tooltip:{
    type:[Object,Boolean],
    default:false
  },
  inType:{
    String,
    validator(value) {
      return ['line', 'shadow', 'none','cross'].includes(value)
    },
    default:'none'
  },
  showSplitLine:{
    type:Boolean,
    default:true
  },
  grid:{
    type:Object,
    default:()=>{}
  },
  series:{
    type:Array,
    required:true
  },
  boundaryGap:{
    type:Boolean,
    default:false
  },
  color:{
    type:Array,
    default:()=>['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
  },
  dataIndex:{
    type:Number,
    default:undefined,
  }
});
watch(props, () => {
  init();
},{deep:true});
onMounted(() => {
  init();
  // 鼠标离开事件
  line.value.addEventListener('mouseleave',()=>{
    init()
  })
});
const line = ref(null);
const dataIndex = computed(()=>props.dataIndex)

const init = () => {
  const option = {
    title:props.title,
    legend:{
        type:'plain',
        show:props.legend,
        textStyle:{
            color:'#fff'
        },
        ...props.legend
    },
    tooltip:{
        show:props.tooltip||true,
        trigger:'axis',
        axisPointer:{
            type:props.inType,
        },
        ...props.tooltip
    },
    grid:{
        top:'20%',
        left:'5%',
        right:'5%',
        bottom:'10%',
        containLabel:true,
        ...props.grid
    },
    xAxis: {
      type: "category",
      boundaryGap:props.boundaryGap,
      data: props.labels,
      axisTick:{
        show:props.axisTick
      },
      axisLine:{
        lineStyle:{
            color:props.xTickLineColor
        }
      },
      axisLabel:{
        color:props.xLabelColor
      },
      ...props.xAxis
    },
    color:props.color,
    yAxis: {
      type: "value",
      name:props.yName,
      nameTextStyle:{
        color:props.yNameColor
      },
      splitLine:{
        show:props.showSplitLine,
        lineStyle:{
            color:props.yLineColor
        },
      },
      axisLabel:{
        color:props.yLabelColor,
      },
      ...props.yAxis,
    },
    series: props.series
  };
  const myChart = echarts.init(line.value);
  myChart.setOption(props.option ?? option,true);
  // 点击事件传递 x轴值
  myChart.off('click')  // 再次初始化之前关闭点击事件,不然会重复添加点击事件
  myChart.on('click', function (params) {
    proxy.$emit('xparams',params.name)
  });
  // 默认激活列
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 1, // 指定系列索引
    dataIndex: dataIndex.value// 指定数据索引
  });
  // 尺寸发生变化
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
</script>
<style scoped>
.echarts-x {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>